<template>
  <view class="min-h-[100vh] bg-[var(--page-bg-color)]  overflow-hidden" :style="themeColor()">
    <view class="fixed left-0 right-0 top-0 z-99">

      <view class="tab-style-1 px-[var(--sidebar-m)] py-[14rpx] bg-[#fff] flex items-center bg-[#fff] ">
        <view class="tab-left">
          <view class="tab-left-item"
            :class="{ '!text-primary class-select': fromType.account_data_gt === item.account_data_gt }"
            v-for="(item, index) in accountTypeList" :key="index" @click="fromTypeFn(item, index)">{{ item.name }}
          </view>
        </view>
        <view class="tab-right" @click="handleSelect">
          <view class="tab-right-date">日期</view>
          <view class="nc-iconfont nc-icon-a-riliV6xx-36 tab-right-icon"></view>
        </view>
      </view>
    </view>
    <mescroll-body ref="mescrollRef" @init="mescrollInit" :down="{ use: false }" @up="getListFn" top="100rpx">
      <view class="pt-[var(--top-m)] body-bottom" v-if="list.length">
        <view v-for="(item, index) in list" :key="item.id"
          class="sidebar-margin mb-[var(--top-m)] card-template relative">
          <view class="flex items-center justify-between mb-[20rpx]">
            <view class="text-[28rpx] font-500 text-[#333] leading-[40rpx]">{{ item.title }}</view>
            <view
              class="absolute right-[30rpx] top-[30rpx] text-[36rpx] font-500 text-[#03B521] leading-[50rpx] price-font"
              :class="{ '!text-[var(--price-text-color)]': item.price > 0 }">{{ item.price > 0 ? '+' +
                fen2yuan(item.price) : fen2yuan(item.price) }}</view>
          </view>
          <view class="text-[24rpx] text-[var(--text-color-light6)] mb-[14rpx]" v-if="item.memo">{{ item.memo }}</view>
          <view class="text-[24rpx] text-[var(--text-color-light6)]">
            {{ timeFormat(item.createTime, 'yyyy-mm-dd hh: MM: ss') }}</view>
        </view>
      </view>
      <mescroll-empty :option="{ tip: tip }" v-if="!list.length && loading"></mescroll-empty>
    </mescroll-body>
    <!-- 时间选择 -->
    <select-date ref="selectDateRef" @confirm="confirmFn" />
  </view>
</template>

<script setup lang="ts">
import { ref, nextTick, reactive } from 'vue'
import { t } from '@/locale'
import MescrollBody from '@/components/mescroll/mescroll-body/mescroll-body.vue';
import MescrollEmpty from '@/components/mescroll/mescroll-empty/mescroll-empty.vue';
import useMescroll from '@/components/mescroll/hooks/useMescroll.js';
import { getBrokerageRecordPage as getCommissionList } from './../api/commission'
import { onPageScroll, onReachBottom, onLoad, onShow } from '@dcloudio/uni-app';
import selectDate from '@/components/select-date/select-date.vue';
import { fen2yuan, timeFormat } from '@/utils/formatting';

const { mescrollInit, downCallback, getMescroll } = useMescroll(onPageScroll, onReachBottom);

const type = ref('')
const tip = ref('')

onLoad((options: any) => {
  if (options.type) {
    fromType.value.account_data_gt = options.type
  }

});

const create_time = ref([])
//来源类型
const fromType = ref({
  account_data_gt: '1'
})
const accountTypeList = ref([
  { name: '佣金', account_data_gt: '1' },
  { name: '提现', account_data_gt: '2' },
])
const list = ref<Array<any>>([]),
  loading = ref<boolean>(false),
  mescrollRef = ref(null);

interface mescrollStructure {
  num: number,
  size: number,
  endSuccess: Function,
  [propName: string]: any
}

const getListFn = (mescroll: mescrollStructure) => {
  loading.value = false;
  let data: Object = {
    pageNo: mescroll.num,
    pageSize: mescroll.size,
    createTime: create_time.value,
    bizType: fromType.value.account_data_gt
  };
  interface acceptingDataStructure {
    data: acceptingDataItemStructure,
    msg: string,
    code: number
  }
  interface acceptingDataItemStructure {
    data: object,
    [propName: string]: number | string | object
  }

  let fnList: any = (params: any) => { };
  fnList = getCommissionList;

  fnList(data).then((res: any) => {
    let newArr = res.data.list;
    mescroll.endSuccess(newArr.length);
    //设置列表数据
    if (mescroll.num == 1) {
      list.value = []; //如果是第一页需手动制空列表
    }
    list.value = list.value.concat(newArr);
    loading.value = true;
  }).catch(() => {
    loading.value = true;
    mescroll.endErr(); // 请求失败, 结束加载
  })
}


// 类型搜索
const fromTypeFn = (data: any, index: number) => {
  fromType.value.account_data_gt = data.account_data_gt
  list.value = []
  getMescroll().resetUpScroll();
}

//日期筛选
const selectDateRef = ref()
const handleSelect = () => {
  selectDateRef.value.show = true
}
// 确定时间筛选
const confirmFn = (data: any) => {
  create_time.value = data;
  list.value = []
  getMescroll().resetUpScroll();
}

</script>

<style lang="scss">
.body-bottom {
  padding-bottom: calc(20rpx + constant(safe-area-inset-bottom));
  padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
}
</style>
